<template>
    <div class="role">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="24">
                        <div>
                            <span class="border-left"></span>
                            系统通知管理
                        </div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="add-role">
                    <Row>
                        <Col :span="24" class="add-btn-box">
                            <div class="add-btn" @click="add">新建通知</div>
                        </Col>
                    </Row>
                </div>

                <div class="table-box">
                    <el-table
                        :data="tableData"
                        size="mini"
                        style="width: 100%;min-width:940px">
                        
                        <el-table-column
                            align="center"
                            prop="title"
                            label="标题">
                        </el-table-column>
                        <el-table-column
                            align="center"
                            prop="content"
                            label="内容"
                            width="500"
                            show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                            align="center"
                            label="添加时间">
                            <template slot-scope="scope">
                                <p>{{scope.row.create_time}}</p>
                            </template>
                        </el-table-column>

                        <el-table-column
                            label="操作"
                            width="100"
                            align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <el-dialog title="新建系统通知" :visible.sync="dialogFormVisible">
                    <Form ref="formValidate" :model="form" :label-width="80" :rules="ruleValidate">
                        <FormItem label="标题：" prop="title">
                            <Input v-model="form.title" placeholder="请填写通知标题" style="width:320px"></Input>
                        </FormItem>
                        <FormItem label="内容:" prop="content">
                            <Input v-model="form.content" type="textarea" :autosize="{minRows: 4,maxRows: 6}" placeholder="请填写通知内容" style="width:320px"></Input>
                        </FormItem>
                    </Form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="handleSubmit('formValidate')">确 定</el-button>
                    </div>
                </el-dialog>

                <div class="page-box">
                    <Page :total="total" show-elevator show-total />
                </div>

            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    </div>
</template>

<script>
    import * as api from '@/api/api';
    export default {
        data(){
            return {
                host: window.location.host,
                loading: this.$store.state,
                tableData: [],
                dialogFormVisible: false,
                form: {
                    title: '',
                    content: '',
                },
                total: 6,
                current_page: 1,
                ruleValidate: {
                    title: [
                        { required: true, message: '请填写通知标题', trigger: 'blur' }
                    ],
                    content: [
                        { required:true, message: '请填写通知内容', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted(){
            this.getList();
        },

        computed: {

        },

        watch: {
            
        },
        
        methods: {
            getList() {
                let body = {
                    model: 'Messages',
                    condition: {
                        is_delete:"0"
                    }
                };
                this.loading.isLoading = true;
                api.getDataList(body).then(res => {
                    this.loading.isLoading = false;
                    if(res.data.code === 200) {
                        this.tableData = res.data.data.data;
                        this.total = res.data.data.count * 1;
                    }
                })
            },
            add() {
                this.dialogFormVisible = true;
            },
            edit(row) {
                
            },
            del(id) {
                this.$confirm('此操作将永久删除该通知, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let body = {
                        model: 'Messages',
                        data: {
                            is_delete: '1'
                        },
                        update_condition: {
                            id
                        }
                    }
                    this.loading.isLoading = true;
                    api.createData(body).then(res => {
                        this.getList();
                        if(res.data.code === 200) {
                            this.$Message.success('删除成功');
                        }
                    })
                })
                
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let body = {
                            model: 'Messages',
                            data: this.form
                        };
                        this.loading.isLoading = true;
                        api.createData(body).then(res => {
                            this.loading.isLoading = false;
                            this.dialogFormVisible = false;
                            this.getList();
                            this.$Message.success('添加成功');
                        })
                    } else {
                        
                    }
                })
            }
            
        }  
    }
</script>


<style lang="less">
    @import '../../assets/styles/constant.less';
    .role{
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .add-role{
                margin-top: 10px;
                .add-btn-box{
                    display: flex;
                    justify-content: flex-end;
                    .add-btn{
                        width: 100px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        background-color: #fff;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        color: #333;
                        cursor: pointer;
                    }
                }
            }
            .table-box{
                margin-top: 10px;
                min-width: 100%;
                .el-table th{
                    background-color: #eee;
                    color: #333;
                    font-size: 14px;
                }
                .el-button--text{
                    color: @greenColor;
                }
            }
            .page-box{
                height: 50px;
                line-height: 50px;
                text-align: right;
                background-color: #fff;
                padding: 0 20px;
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>